<template>
  <div class="r_1qhn6m">
    
      <ul>

        <li v-for="summer2 in summerhot" :key="summer2.id">
          <div class="figure_img4">
            <img :src="summer2.pic1" alt="" />
          </div>
          <div class="good_title4">
            <p class="title_p4"><span>{{summer2.baojia}}</span>{{summer2.name}}</p>
            <p class="title_desc4">{{summer2.des}}</p>
            <p class="title_price4"><span>￥{{summer2.newprice}}</span><del>￥{{summer2.oldprice}}</del></p>
            <span class="offer">{{summer2.offer1}}</span><span class="offer">{{summer2.offer2}}</span>
          </div>
        </li>

      </ul>
    </div>

</template>

<script>
import axios from "axios"
export default {
  name: "ActiveBot",
  data(){
    
    return{
      summerhot:[
        // {
        //   img:require("../../../../../public/xiaxia/imgs/12.png"),
        //   name:"MateBook 14",
        //   baojia:"保价618",
        //   desc:"华为智慧屏 SE65/SE65 Pro",
        //   newprice:1300,
        //   oldprice:1600,
        //   offer1:"赠送积分",
        //   offer2:"分期免息"
        // },
        // {
        //   img:require("../../../../../public/xiaxia/imgs/13.png"),
        //   name:"MateBook 14",
        //   baojia:"保价618",
        //   desc:"HUAWEI MateStation S 锐龙版",
        //   newprice:1300,
        //   oldprice:1600,
        //   offer1:"赠送积分",
        //   offer2:"分期免息"

        // },
        // {
        //   img:require("../../../../../public/xiaxia/imgs/14.png"),
        //   name:"MateBook 14",
        //   baojia:"保价618",
        //   desc:"HUAWEI MateBook 14 12代酷睿",
        //   newprice:1300,
        //   oldprice:1600,
        //   offer1:"赠送积分"
        // },
        // {
        //   img:require("../../../../../public/xiaxia/imgs/15.png"),
        //   name:"MateBook 14",
        //   baojia:"保价618",
        //   desc:"HUAWEI WATCH GT 3 Pro",
        //   newprice:1300,
        //   oldprice:1600,
        //   offer1:"赠送积分",
        //   offer2:"分期免息"
        // }
      ],
      
    }
  },
   created() {
    axios({
      url: "http://d8f7tq.natappfree.cc/nGoods/selectSome",
      params: {
        ntype: 1
      },
    })
      .then((res) => {
        console.log("res.data",res.data.data);
        this.summerhot = res.data.data;
      })
      .catch((err) => {
        console.log("出错了", err);
      });
  },
};
</script>



<style scoped>

.r_1qhn6m > ul{
  padding: 0 .15rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.r_1qhn6m > ul > li {
  width: 1.67rem;
  /* height: 3.1rem; */
  background-color: white;
  border-radius: 0.15rem;
  overflow: hidden;
  margin-bottom: .1rem;
}
.figure_img4 {
  width: 1.67rem;
  height: 1.67rem;
  text-align: center;
}
.figure_img4 > img {
  width: 100%;
  height: 100%;
}
.good_title4 {
  padding: 0.1rem ;
}

.title_p4 {
  font-size: 0.14rem;
  font-weight: 600;
  height: 0.36rem;
  color: #333;
}

.title_p4 > span {
  color: white;
  background-color: red;
  font-size: 13px;
  border-radius: 0.05rem;
}
.title_price4 {
  line-height: 0.16rem;
}
.title_desc4 {
  font-size: 0.12rem;
  margin-bottom: 0.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
.title_price4 > span {
  color: rgb(207, 10, 44);
  font-size: 0.14rem;
  font-weight: 600;
}
.title_price4 > del {
  font-size: 12px;
  margin-left: 0.03rem;
}
.offer { 
 
  font-size: .12rem;
  border: 1px solid #b12331;
  padding: .01rem .02rem;
  margin: 0 .05rem;
  border-radius: .05rem;
 }
</style>